<template>
	<view class="tabbar safe-bottom">
	<view class="item" :class="{active:active==='home'}" @tap="go('home')">
		<image class="icon" :class="{inactive:active!=='home'}" :src="icons.home" />
			<text class="txt">首页</text>
		</view>
	<view class="item" :class="{active:active==='ai'}" @tap="go('ai')">
		<image class="icon" :class="{inactive:active!=='ai'}" :src="icons.ai" />
			<text class="txt">智能AI</text>
		</view>
	<view class="item" :class="{active:active==='mine'}" @tap="go('mine')">
		<image class="icon" :class="{inactive:active!=='mine'}" :src="icons.mine" />
			<text class="txt">我的</text>
		</view>
	</view>
</template>

<script>
export default{
	name:'BottomTab',
	props:{ active:{ type:String, default:'home' } },
	data(){
		return{
			icons:{
				home:'/static/home.svg',
				ai:'/static/ai.svg',
				mine:'/static/mine.svg'
			}
		}
	},
	methods:{
		go(key){
			const map={ home:'/pages/home/home', ai:'/pages/ai/ai', mine:'/pages/mine/mine' }
			const url=map[key]
			if(!url) return
			const pages=getCurrentPages()
			const current=pages[pages.length-1] && pages[pages.length-1].route
			if(current===url.replace(/^\//,'')) return
			uni.reLaunch({ url })
		}
	}
}
</script>

<style scoped>
.tabbar{position:fixed;left:0;right:0;bottom:0;height:110rpx;background:rgba(255,255,255,.86);backdrop-filter:blur(18rpx);border-top:2rpx solid rgba(0,0,0,.04);display:flex;justify-content:space-around;align-items:center;z-index:999}
.item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6b6b6b}
.icon{width:44rpx;height:44rpx;margin-bottom:4rpx;opacity:1;filter:drop-shadow(0 2rpx 2rpx rgba(0,0,0,.05))}
.icon.inactive{opacity:.7}
.txt{font-size:26rpx}
.active{color:#FF6B35}
.safe-bottom{padding-bottom:env(safe-area-inset-bottom);padding-bottom:constant(safe-area-inset-bottom)}
</style>

